﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>无标题文档</title>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <script language="JavaScript" src="js/jquery.js"></script>
    <!--引入Vue组件 -->
    <script type="text/javascript" src="js/vue.js"></script>
    <!--引入axios(vue的异步交互)组件 -->
    <script type="text/javascript" src="js/axios.min.js"></script>
    <!-- 导入自定义的js配置文件-->
    <script type="text/javascript" src="js/my_base_config.js"></script>

    <script type="text/javascript">

        $(function () {
            //顶部导航切换
            $(".nav li a").click(function () {
                $(".nav li a.selected").removeClass("selected")
                $(this).addClass("selected");
            })
        })
    </script>


</head>

<body style="background:url(images/topbg.gif) repeat-x;">
<div id="app">

    <div class="topleft">
        <a href="main.html" target="_parent"><img src="images/logo.png" title="系统首页"/></a>
    </div>

    <ul class="nav">
        <li><a href="default.html" target="rightFrame" class="selected"><img src="images/icon01.png" title="工作台"/>
            <h2>工作台</h2></a></li>
        <li><a href="imgtable.html" target="rightFrame"><img src="images/icon02.png" title="模型管理"/>
            <h2>模型管理</h2></a></li>
        <li><a href="imglist.html" target="rightFrame"><img src="images/icon03.png" title="模块设计"/>
            <h2>模块设计</h2></a></li>
        <li><a href="tools.html" target="rightFrame"><img src="images/icon04.png" title="常用工具"/>
            <h2>常用工具</h2></a></li>
        <li><a href="computer.html" target="rightFrame"><img src="images/icon05.png" title="文件管理"/>
            <h2>文件管理</h2></a></li>
        <li><a href="tab.html" target="rightFrame"><img src="images/icon06.png" title="系统设置"/>
            <h2>系统设置</h2></a></li>
    </ul>

    <div class="topright">
        <ul>
            <li><span><img src="images/help.png" title="帮助" class="helpimg"/></span><a href="#">帮助</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#" target="_parent" @click="logout">退出</a></li>
        </ul>

        <div class="user">
    <span>{{admin.name}}</span>
            <i>消息</i>
            <b>5</b>
        </div>

    </div>
</div>
<script>

    new Vue({
        el: '#app',
        data:{
          admin:{},//当前登录账户的信息，默认为空
        },
        methods: {
            logout() {//注销请求
                axios
                    .get("/backstage/logout")
                    .then(response=>{
                       const data=response.data;
                       if (data.success){
                           parent.location.href="login.html"
                       }
                    });
            },
            readSession(){//读取当前登录账户信息
                axios
                    .get("/backstage/session")
                    .then(response=>{
                        const responseData=response.data;
                            if (responseData.success){
                                this.admin=responseData.data;
                            }
                    });
            }
        },
        mounted(){//当页面元素加载完成之后，自动执行里面的代码
            this.readSession();
        }
    });
</script>
</body>
</html>
